<template>
  <div class="container">
    <el-tabs
      v-model="activeName"
      class="tabs"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="item in langList"
        :key="item.id"
        :label="item.lang"
        :name="item.lang"
      />
    </el-tabs>
    <div class="content">
      <div class="search_content">
        <el-form inline>
          <el-form-item label="内容标题：">
            <el-input
              v-model="searchForm.title"
              size="small"
              placeholder="请输入内容标题"
            />
          </el-form-item>
          <el-form-item label="站点：">
            <el-select
              v-model="searchForm.website_id"
              size="small"
              @change="getColumnList"
            >
              <el-option
                v-for="item in webList"
                :key="item.id"
                :label="item.domain"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="栏目：">
            <el-select
              v-model="searchForm.category_id"
              size="small"
              filterable
              multiple
            >
              <el-option-group
                v-for="group in columnList"
                :key="group.id"
                :label="group.title"
              >
                <el-option
                  v-for="item in group.category"
                  :key="item.id"
                  :label="item.parent_id != 0 ? `${item.title}` : item.title"
                  :value="+item.id"
                  :disabled="item.disabled"
                />
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="handleSearch">
              搜索
            </el-button>
            <el-button size="small" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="topbtn">
          <el-button
            type="primary"
            class="tianBlue"
            size="mini"
            @click="handleExamine(checkedList)"
          >
            批量通过
          </el-button>
          <el-button
            type="primary"
            class="orange"
            size="mini"
            @click="handleReject(checkedList)"
          >
            批量驳回
          </el-button>
        </div>
      </div>
      <div class="flex">
        <el-table :data="checkList" @selection-change="handleSelectionChange">
          >
          <el-table-column type="selection" width="55" />
          <el-table-column label="文章标题" prop="title" />
          <el-table-column label="栏目">
            <template slot-scope="scope">
              {{ renderTitle(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="create_time" />
          <el-table-column label="创建人" prop="author" />
          <el-table-column label="操作" width="160" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="handleTarget(scope.row)"
              >
                审核
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          :hide-on-single-page="page.total < page.size ? true : false"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <BouncedDialog
      width="550px"
      title="审核"
      :dialog-show.sync="dialogShow"
      :footer="true"
      @submit="handleSubmitReject"
      @cancel="handleClose"
    >
      <el-form label-width="120px">
        <el-form-item label="拒绝原因：">
          <el-input
            v-model="rejectForm.reason"
            type="textarea"
            placeholder="请输入拒绝原因"
          />
        </el-form-item>
        <el-form-item label="拒绝附件：">
          <BaseUpload v-model="rejectForm.file" description=" " />
        </el-form-item>
      </el-form>
    </BouncedDialog>
  </div>
</template>

<script>
import columnApi from '@/api/column.js'
import websetApi from '@/api/websetting'
import contentApi from '@/api/module'
import webApi from '@/api/website'
import moduleApi from '@/api/module'
import BaseUpload from '@/components/baseUpload'
export default {
  components: {
    BaseUpload
  },
  data() {
    return {
      rejectForm: {},
      examineInfo: [],
      dialogShow: false,
      activeName: '',
      searchForm: {},
      langList: [],
      webList: [],
      columnList: [],
      checkList: [],
      checkedList: [],
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      } // 分页器
    }
  },
  computed: {
    siteId() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    '$store.getters.siteId': {
      handler(val) {
        if (val) {
          this.searchForm.website_id = val
          this.getLang()
          this.getWebList()
        }
      },
      immediate: true
    }
  },
  methods: {
    handleTarget(row) {
      this.$router.push({
        name: 'updateContent',
        query: {
          id: row.id,
          lang: row.lang,
          module_id: row.module_id,
          website_id: this.searchForm.website_id,
          type: 'examine'
        }
      })
    },
    renderTitle(row) {
      return row.category.map(item => item.title).join('、')
    },
    handleSelectionChange(e) {
      this.checkedList = e
    },
    handleSearch() {
      this.page.currentPage = 1
      this.getCheckList()
    },
    handleReset() {
      this.searchForm = {}
      this.page = {
        ...this.page,
        currentPage: 1,
        size: 10
      }
      this.getCheckList()
    },
    getLang() {
      websetApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data
        if (res.data.length > 0) {
          this.activeName = res.data[0].lang
        }
        this.getCategoryList()
        this.getCheckList()
      })
    },
    async getCategoryList() {
      const res = await contentApi.getModuleCate({
        site_id: [this.siteId],
        lang: this.activeName,
        ...this.searchForm
      })
      this.columnList = res.data
      this.columnDataSource = res.data?.[0]?.category || []
    },
    async getWebList() {
      const res = await webApi.websiteList()
      this.getTreeData(res.data)
    },
    // 递归获取到站点的数据
    getTreeData(data) {
      const webListArray = []
      function transformWebList(data) {
        if (data.length) {
          data.forEach(item => {
            webListArray.push({
              id: item.id,
              domain: item.parent_id != 0 ? `--${item.domain}` : item.domain,
              parent_id: item.parent_id
            })
            if (item.children.length) {
              transformWebList(item.children)
            }
          })
        }
      }
      transformWebList(data)
      this.webList = webListArray
    },
    // tab切换
    handleClick(val) {
      this.activeName = val.name
      this.getCategoryList()
    },
    async getColumnList(e) {
      const res = await moduleApi.getModuleCate({
        lang: this.activeName,
        site_id: [e]
      })
      this.columnList = res.data
    },
    async getCheckList() {
      const res = await columnApi.getCheckList({
        page: this.page.currentPage,
        limit: this.page.size,
        lang: this.activeName,
        website_id: this.siteId,
        ...this.searchForm
      })
      this.checkList = res.data
      this.page.total = res.count
    },
    // 审批数据
    async checkData(data) {
      const result = await columnApi.checkContent(data)
      if (result.code == 0) {
        this.$message.success(result.msg)
        this.rejectForm = {}
        this.rejectForm.file = []
        this.getCheckList()
        this.dialogShow = false
      }
    },
    async handleExamine(data) {
      if (!data.length) {
        this.$message.error('请先选择数据！')
        return
      }
      const check_data = data.map(item => ({
        version: item.version,
        id: item.id
      }))
      const res = await this.$confirm(`此操作将通过审核, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).catch(err => console.log(err))
      if (res) {
        this.checkData({
          status: 3,
          check_data
        })
      }
    },
    handleReject(data) {
      if (!data.length) {
        this.$message.error('请先选择数据！')
        return
      }
      this.dialogShow = true
      this.examineInfo = data
    },
    handleClose() {
      this.rejectForm = {}
      this.rejectForm.file = []
    },
    handleSubmitReject() {
      if (!this.rejectForm.file?.length || !this.rejectForm.reason) {
        this.$message.error('请填写信息')
        return
      }
      const res = {
        status: 4,
        reason: this.rejectForm.reason,
        files: this.rejectForm.file.map(item => item.id),
        check_data: this.examineInfo.map(item => ({
          version: item.version,
          id: item.id
        }))
      }
      this.checkData(res)
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getCheckList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getCheckList()
    }
  }
}
</script>

<style lang="scss" scope>
.search_content {
  display: inline-block;
  margin: 0 20px;
}
.content {
  background-color: #fff;
  padding-top: 20px;
}
.flex {
  margin-top: 20px;
}
</style>
